<template>
<div class="wrapper">
<swiper :options='swiperOption'>
    
    <swiper-slide  v-for="item of swiperList" :key="item.id">
        <img class="swiper-img"  :src="item.imgUrl"/>
     </swiper-slide>
   
    <div  class = "swiper-pagination " slot = " pagination"> </div >
  </swiper>
 </div>
</template>
<script>
export default{
    name:'HomeSwiper',
    data () {
        return {
            swiperOption: {
                pagination :".swiper-pagination",
                loop:true

            },
            swiperList:[
        {
        id:'0001',
        imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/a4c27b0a5fc1d9e9e620225869089b12.jpg_750x200_e4720428.jpg"
        },
        {id:'0002',
        imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/1f69b3ab28f9962158c798a8a3f5b4b3.jpg_750x200_fb4bf7c4.jpg"
        },
        {id:'0003',
        imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/bc62e131afb380e98e4beac33e751c6c.jpg_750x200_2e248116.jpg"
        },
        {id:'0004',
        imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg"
        }
       ]
        }
    }
  
}
</script>

<style lang="stylus" scoped>
wrapper>>>.swiper-pagination-bullet-active
    background:red !important
.wrapper
  width:100%
  background:#eee
  
.swiper-img
   width:100%
   height:300px
</style>